<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html data-theme="dark">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="<c:url value="/assets/css/tailwind.output.css"/>" rel="stylesheet"/>
    <script src="<c:url value="/assets/js/jquery-3.6.0.min.js"/>"></script>
    <script src="<c:url value="/assets/js/custom/themeToggle.js"/>"></script>

    <title>后台管理</title>
</head>

<body>
<div class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-white antialiased font-sans">
    <div class="flex flex-col h-screen">
        <!-- header -->
        <jsp:include page="home/header.jsp" flush="true"/>
        <div class="flex-1 flex overflow-hidden">
            <!-- aside -->
            <jsp:include page="home/aside.jsp" flush="true"/>
            <!-- content -->
            <iframe src="panel/_none.jsp" class="flex-1 p-6"></iframe>
        </div>
    </div>
</div>
    <script>
        $(document).ready(function () {
            $('.theme-controller').themeToggle();
            $('#menu-toggle').on('click', function () {
                let sidebar = $('#sidebar');
                if (sidebar.hasClass('hidden')) {
                    sidebar.removeClass('hidden').addClass('block');
                    sidebar.css('transform', 'translateX(0)');
                } else {
                    sidebar.removeClass('block').addClass('hidden');
                    sidebar.css('transform', 'translateX(-100%)');
                }
            });

            // Handle sidebar item clicks
            $('.side-item').on('click', function () {
                let page = $(this).data('page');
                let iframe = $('iframe');
                iframe.attr('src', 'panel/' + page);
            });
        });
    </script>
    <style>
        #sidebar {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            z-index: 100;
            transition: transform 0.3s ease-in-out;
        }

        .hidden {
            transform: translateX(-100%);
        }

        @media (min-width: 768px) {
            #sidebar {
                position: relative;
                transform: translateX(0);
            }
        }
    </style>
</body>
</html>
